<template>
    <div class="table">
        <div class="content-common">
			<el-row type="flex" class="row-bg" justify="space-between" style="padding-bottom:20px">
				<el-col :span="6"><el-button type="primary"  @click="prepage()">返回</el-button></el-col>
				<el-col :span="6" style="text-align:right">
<!--           			<el-button type="primary" icon="plus" @click="handleAdd()">新增</el-button>
 -->					
					<el-button type="primary"  icon="download" @click="daochu()">导出记录</el-button>
				</el-col>
			</el-row>
			<div style="font-size:18px;text-align:center;font-weight:bold;padding-bottom:8px">
			小区整编表-5 {{stnm}}站径流小区逐次径流泥沙
		   </div>
		   <div style="width:100%;overflow: auto;">
		   	<table style="width:100%" border="0px solid #ebeef5" cellpadding="0" cellspacing="0">
		   			<thead>
		   				<tr>
							<th rowspan="2" style="width:50px">小区号</th>
		   					<th colspan="3">降雨起</th>
		   					<th colspan="2">降雨止</th>
		   					<th rowspan="2">历时(min)</th>
		   					<th rowspan="2">雨量(mm)</th>
		   					<th rowspan="2">平均雨强(mm/h)</th>
		   					<th rowspan="2">I30 (mm/h)</th>
		   					<th rowspan="2">降雨侵蚀力(MJ.mm /(ha.h))</th>
		   					<th rowspan="2">径流深(mm)</th>
		   					<th rowspan="2">径流系数</th>
		   					<th rowspan="2">含沙量(g/l)</th>
		   					<th rowspan="2">土壤流失量(t/h㎡)</th>
		   					<th rowspan="2">雨前土壤含水量(%)</th>
		   					<th rowspan="2">雨后土壤含水量(%)</th>
		   					<th rowspan="2">植被盖度(%)</th>
							<th rowspan="2">平均高度(m)</th>
							<th rowspan="2">备注</th>
		   				</tr>
						<tr>
							
							<th>月</th>
							<th>日</th>
							<th style="width:40px">时:分</th>
							<th>日</th>
							<th style="width:40px">时:分</th>
						</tr>	
		   			</thead>
		   			<tbody>
		   				<template v-for="(item,index) in tableData" :key="index">
							<tr v-if="item.detailList[0].runoffDepth!==null" v-for="(iteminner,indexinner) in item.detailList" :key="indexinner">
								<td v-if="indexinner==0" :rowspan="item.detailList.length">{{iteminner.areaCode}}</td> 
								<td>{{iteminner.monthBegin}}</td>
								<td>{{iteminner.dayBegin}}</td>
								<td>{{iteminner.timeBegin}}</td>
								<td>{{iteminner.dayEnd}}</td> 
								
								<td>{{iteminner.timeEnd}}</td>
								
								<td>{{iteminner.totalPdr}}</td>
								<td v-if="indexinner==0" :rowspan="item.detailList.length">{{iteminner.totalDrp}}</td>
								<td>{{iteminner.avgRainIntensity}}</td>
								<td>{{iteminner.i30}}</td>
								
								<td>{{iteminner.ei30}}</td>
								<td v-if="indexinner==0" :rowspan="item.detailList.length">{{iteminner.runoffDepth}}</td> 
								<td v-if="indexinner==0" :rowspan="item.detailList.length">{{iteminner.runoffCoefficient}}</td>
								<td v-if="indexinner==0" :rowspan="item.detailList.length">{{iteminner.sandContent}}</td>
								<td v-if="indexinner==0" :rowspan="item.detailList.length">{{iteminner.soilLoss}}</td>
								<td v-if="indexinner==0" :rowspan="item.detailList.length">{{iteminner.waterContentBefore}}</td>
								<td v-if="indexinner==0" :rowspan="item.detailList.length">{{iteminner.waterContentAfter}}</td>
								<td v-if="indexinner==0" :rowspan="item.detailList.length">{{iteminner.plantCoverage}}</td>
								<td v-if="indexinner==0" :rowspan="item.detailList.length">{{iteminner.avgHeight}}</td>
								<td v-if="indexinner==0" :rowspan="item.detailList.length">{{iteminner.remark}}</td>
								
							</tr>
						</template>
		   				
		   			</tbody>   
		   	  </table>
		   </div>
            <!-- <el-table
                :data="tableData"
                border
                class="table-common"
                header-cell-class-name="table-header">
                <el-table-column align="center" prop="areaCode" label="小区号"></el-table-column>
                <el-table-column align="center" prop="purpose" label="降雨起">
                	<el-table-column align="center" prop="monthBegin" label="月"></el-table-column>
                	<el-table-column align="center" prop="dayBegin" label="日"></el-table-column>
                	<el-table-column align="center" prop="timeBegin" label="时:分"></el-table-column>
                </el-table-column>
                <el-table-column align="center" prop="slope" label="降雨止">
                	<el-table-column align="center" prop="dayEnd" label="日"></el-table-column>
                	<el-table-column align="center" prop="timeEnd" label="时:分"></el-table-column>
                </el-table-column>
				<el-table-column align="center" prop="totalPdr" label="历时(min)"></el-table-column>
				<el-table-column align="center" prop="totalDrp" label="雨量(mm)"></el-table-column>
                <el-table-column align="center" prop="avgRainIntensity" label="平均雨强(mm/h)"></el-table-column>
                <el-table-column align="center" prop="i30" label="I30 (mm/h)"></el-table-column>
                <el-table-column align="center" prop="ei30" label="降雨侵蚀力(MJ.mm /(ha.h))"></el-table-column>
                <el-table-column align="center" prop="runoffDepth" label="径流深(mm)"></el-table-column>
                <el-table-column align="center" prop="runoffCoefficient" label="径流系数">
                </el-table-column>
                <el-table-column align="center" prop="sandContent" label="含沙量(g/l)">
                </el-table-column>
                <el-table-column align="center" prop="soilLoss" label="土壤流失量(t/h㎡)"></el-table-column>
                <el-table-column align="center" prop="waterContentBefore" label="雨前土壤含水量(%)"></el-table-column>
                <el-table-column align="center" prop="waterContentAfter" label="雨后土壤含水量(%)"></el-table-column>
                <el-table-column align="center" prop="plantCoverage" label="植被盖度(%)"></el-table-column>
                <el-table-column align="center" prop="avgHeight" label="平均高度(m)"></el-table-column>
                <el-table-column align="center" prop="remark" label="备注"></el-table-column>
               
            </el-table> -->
			
        </div>

        <!-- 编辑弹出框 -->
        <el-dialog :title="logTitle" v-model="editVisible" width="1300px">
			<el-table
			    :data="subData"
			    border
			    class="table-common"
			    header-cell-class-name="table-header">
			    <el-table-column align="center" prop="areaCode" label="小区号"></el-table-column>
			    <el-table-column align="center" prop="purpose" label="降雨起">
					<el-table-column align="center" prop="monthBegin" label="月"></el-table-column>
					<el-table-column align="center" prop="dayBegin" label="日"></el-table-column>
					<el-table-column align="center" prop="timeBegin" label="时:分"></el-table-column>
				</el-table-column>
				<el-table-column align="center" prop="slope" label="降雨止">
					<el-table-column align="center" prop="dayEnd" label="日"></el-table-column>
					<el-table-column align="center" prop="timeEnd" label="时:分"></el-table-column>
				</el-table-column>
				<el-table-column align="center" prop="avgRainIntensity" label="平均雨强(mm/h)"></el-table-column>
				<el-table-column align="center" prop="i30" label="I30 (mm/h)"></el-table-column>
				<el-table-column align="center" prop="ei30" label="降雨侵蚀力(MJ.mm /(ha.h))"></el-table-column>
				<el-table-column align="center" prop="runoffDepth" label="径流深(mm)"></el-table-column>
				<el-table-column align="center" prop="runoffCoefficient" label="径流系数" width="140px">
					<template #default="scope">
					    <el-input style="width:80px" v-model="scope.row.runoffCoefficient" placeholder=""></el-input>
					</template>
				</el-table-column>
				<el-table-column align="center" prop="sandContent" label="含沙量(g/l)" width="140px">
					<template #default="scope">
					    <el-input style="width:80px" v-model="scope.row.sandContent" placeholder=""></el-input>
					</template>
				</el-table-column>
				<el-table-column align="center" prop="soilLoss" label="土壤流失量(t/h㎡)"></el-table-column>
				<el-table-column align="center" prop="waterContentBefore" label="雨前土壤含水量(%)"></el-table-column>
				<el-table-column align="center" prop="waterContentAfter" label="雨后土壤含水量(%)"></el-table-column>
				<el-table-column align="center" prop="plantCoverage" label="植被盖度(%)"></el-table-column>
				<el-table-column align="center" prop="avgHeight" label="平均高度(m)"></el-table-column>
				<el-table-column align="center" prop="remark" label="备注" width="140px">
					<template #default="scope">
					    <el-input style="width:80px" v-model="scope.row.remark" placeholder=""></el-input>
					</template>
				</el-table-column>
			    
			</el-table>
			<template #footer>
				<span  class="dialog-footer">
		      
			  <el-button type="primary" @click="saveEdit">确 定</el-button>
		  		</span>
			</template>
        </el-dialog>
    </div>
</template>

<script>

import {useStore} from 'vuex'
import { reorganizeseqSedimentviewselectReorganizeData,reportfieldManageeditdoApprove,reportfieldManageeditrevokeRecord,reportfieldManageeditsubmitRecord,
viewPageStationInfo,rainfallImportRainfallDaily,reorganizeseqSedimentviewlistDetail, reorganizeseqSedimentsaveaddDetail, 
reorganizeseqSedimentremovedelDetail } from '../../../api/index';
import moment from 'moment'
export default {
    name: 'zhengbianzhucinishamingxi',
    data() {
        return {
			subData:[],
			status:'/',
			rules: {
			 
			  areaCode: [
								{ required: true, message: '必填项', trigger: 'change' }
			  ],
			  monthBegin: [
				{ required: true, message: '必填项', trigger: 'change' }
			  ],
			  dayBegin: [
				{ required: true, message: '必填项', trigger: 'blur' }
			  ],
			  timeBegin: [
				{ required: true, message: '必填项', trigger: 'blur' }
			  ],
			  dayEnd: [
				{ required: true, message: '必填项', trigger: 'change' }
			  ],
			  timeEnd: [
				{ required: true, message: '必填项', trigger: 'blur' }
			  ],
			  totalPdr: [
				{ required: true, message: '必填项', trigger: 'blur' }
			  ],
			  totalDrp: [
				{ required: true, message: '必填项', trigger: 'change' }
			  ],
			  avgRainIntensity: [
				{ required: true, message: '必填项', trigger: 'blur' }
			  ],
			  i30: [
				{ required: true, message: '必填项', trigger: 'blur' }
			  ],
			  ei30: [
				{ required: true, message: '必填项', trigger: 'change' }
			  ],
			  runoffDepth: [
				{ required: true, message: '必填项', trigger: 'blur' }
			  ],
			  runoffCoefficient: [
				{ required: true, message: '必填项', trigger: 'blur' }
			  ],
			  sandContent: [
				{ required: true, message: '必填项', trigger: 'change' }
			  ],
			  soilLoss: [
				{ required: true, message: '必填项', trigger: 'blur' }
			  ],
			  waterContentBefore: [
				{ required: true, message: '必填项', trigger: 'blur' }
			  ],
			  waterContentAfter: [
				{ required: true, message: '必填项', trigger: 'change' }
			  ],
			  plantCoverage: [
				{ required: true, message: '必填项', trigger: 'blur' }
			  ],
			  avgHeight: [
				{ required: true, message: '必填项', trigger: 'blur' }
			  ]
			},
			shenpilog:false,
			globalUser:[],
			page:{
				currentPage: 1,
				pageSize: 10,
				totalPage: 0,
				totalSize: 0
			},
            query: {
                year:moment().format('YYYY')
            },
			excelllog:false,
            formInline: {},
            tableData: [],
           stnm:stationInfo.stnm,
            editVisible: false,
            logTitle: '',
            pageTotal: 0,
            form: {
               year:moment().format('YYYY')
            },
			stationData:[],
			checkArr:[],
			tijiaoform:{
				
			},
			selnow:{}
        };
    },
    created() {
		
		this.status=this.$route.query.status
		this.globalUser=globalUser
        let that = this;
        //that.getData();
		
		this.getjisuandata()
		
    },
    methods: {
		daochu(){
			location.href=globalVar.jingliujiangyuUrl+`/soilWater/runoffField/reorganize/seqSediment/export/exportReorganizeData?headNo=${this.$route.query.recordNo}&year=${this.$route.query.year}&stcd=${this.$route.query.stcd}`
		},
		prepage(item){
			 this.$router.go(-1);
		},
		quedingtijiao(){
			this.tijiaoform.relatedNo=this.selnow.recordNo
			let that=this
			reportfieldManageeditdoApprove(that.tijiaoform).then(e=>{
				that.$message.success('操作成功');
				that.shenpilog=false
			}).catch(e=>{
				console.log(err)
			})
		},
		getjisuandata(){
			
			let that=this
			reorganizeseqSedimentviewselectReorganizeData({
				stcd:stationInfo.stcd,
				obDate:that.$route.query.obDate+':00',
				year:that.$route.query.year
			}).then(e=>{
				that.subData=e.object.map(item=>{
					item.headNo=that.$route.query.recordNo
					delete item.detailNo
					item.monthEnd=item.monthBegin
					return item
				})
				console.log(that.subData,'HHHHHHHHHHHHHHHHH')
				let areacodearr=[]
				for(let i=0;i<that.subData.length;i++){
					areacodearr.push(that.subData[i].areaCode)
				}
				
				let areacodeset = new Set(areacodearr)
				areacodearr = [...areacodeset]
				
				let newData=[]
				for(let i=0;i<areacodearr.length;i++){
					newData[i]={
						areaCode:areacodearr[i],
						detailList:[]
					}
					for(let j=0;j<that.subData.length;j++){
						if(areacodearr[i]==that.subData[j].areaCode){
							newData[i].detailList.push(that.subData[j])
						}
						
					}
				}
				
				
				for(let i=0;i<newData.length;i++){
					let totalDrp=0
					for(let j=0;j<newData[i].detailList.length;j++){
						totalDrp+=newData[i].detailList[j].totalDrp
					}
					for(let j=0;j<newData[i].detailList.length;j++){
						newData[i].detailList[j].totalDrp=totalDrp
					}
				}
				
				that.subData=[]
				for(let i=0;i<newData.length;i++){
					that.subData=that.subData.concat(newData[i].detailList)
				}
				that.handleAdd()
			}).catch(err=>{
				console.log(err)
			})
		},
	
		getstationData() {
			let data={
				currentPage:1,
				pageSize:1000
			}
		    viewPageStationInfo(data).then((res) => {
		       
		        this.stationData = res.object.dataList.filter(item=>{
                    return item.stType==systype
                });
		       
		       
		    });
		},
		daorujiangyu(){
			let that=this
			rainfallImportRainfallDaily(that.form).then(e=>{
				console.log(e)
			}).catch(err=>{
				console.log(err)
			})
		},
      
        getData() {
			let data={
				headNo:this.$route.query.recordNo

			}
            reorganizeseqSedimentviewlistDetail(data).then((res) => {
               let areacodearr=[]
               for(let i=0;i<res.object.length;i++){
               	areacodearr.push(res.object[i].areaCode)
               }
               
               let areacodeset = new Set(areacodearr)
               areacodearr = [...areacodeset]
               
               let newData=[]
               for(let i=0;i<areacodearr.length;i++){
               	newData[i]={
               		areaCode:areacodearr[i],
               		detailList:[]
               	}
               	for(let j=0;j<res.object.length;j++){
               		if(areacodearr[i]==res.object[j].areaCode){
						
               			newData[i].detailList.push(res.object[j])
               		}
               		
               	}
               }
			   
			   console.log(newData,'??????????????????????????/')
			   
                this.tableData = newData;
               
                
            });
        },
      
       
		
      
        // 编辑操作
        handleEdit(row) {
           this.subData = [row];
           
            this.logTitle = '编辑逐次径流泥沙整编明细';
           
            this.editVisible = true;
        },
        handleAdd() {
            this.logTitle = '新增逐次径流泥沙整编明细';
            this.form = {
               year:moment().format('YYYY')
            };
           // this.editVisible = true;
		   this.saveEdit()
        },
        // 保存编辑
        saveEdit() {
            let that=this
			that.subData=that.subData.map(item=>{
				
				if(item.runoffDepth){
					item.runoffCoefficient=item.runoffDepth/item.totalDrp
				}
				
				
				
				return item
			})
			reorganizeseqSedimentsaveaddDetail(that.subData).then((e) => {
			    this.editVisible = false;
			    //this.$message.success('操作成功');
			    this.getData();
			});
			
        }
    }
};
</script>

<style scoped>
	table{  line-height:25px;}
	th{ border:1px solid #fff;background:#3f8cff ;color:#fff;padding:6px 8px;}
	td{  text-align:center;border:1px solid #ebeef5} 
	tr:hover{ background-color:#f5f7fa}
.handle-box {
    margin-bottom: 20px;
}

.handle-select {
    width: 120px;
}

.handle-input {
    width: 300px;
    display: inline-block;
}
.table {
    width: 100%;
    font-size: 14px;
}
.red {
    color: #ff0000;
}
.mr10 {
    margin-right: 10px;
}
.table-td-thumb {
    display: block;
    margin: auto;
    width: 40px;
    height: 40px;
}
</style>

